<template>
    <view class="user-salesman-record" v-if="isLoad">
        <!-- <back></back> -->
        <fixed>
            <view @tap.stop="toShowTimePopup" class="fix-info flex-y-center pl-lg">
                <view>{{ prev_time | handleTimeText }}</view>
                <i class="iconfont iconshaixuanxia-1 ml-sm"></i>
            </view>
        </fixed>
        <view
            class="list-item ml-lg mr-lg pt-lg pb-lg b-1px-b"
            v-for="(item, index) in list.data"
            :key="index"
        >
            <view class="flex-y-center f-paragraph c-title text-bold"
                >订单号<view class="ml-sm">{{ item.order_code }}</view>
            </view>
            <view class="f-caption c-caption mt-md">{{ item.can_tx_date }}</view>
            <view class="flex-between">
                <view class="f-caption" style="color: #3d2c1b">订单收益</view>
                <view class="flex-y-center f-caption c-warning"
                    >¥<view class="f-paragraph">{{ item.salesman_cash }}</view>
                </view>
            </view>
        </view>

        <load-more
            :noMore="list.current_page >= list.last_page && list.data.length > 0"
            :loading="loading"
            v-if="loading"
        >
        </load-more>
        <abnor v-if="!loading && list.data.length <= 0 && list.current_page == 1"> </abnor>

        <view class="space-footer"></view>

        <uni-popup ref="show_choose_time" type="bottom">
            <view class="popup-choose-time fill-base">
                <view class="pl-lg pr-lg">
                    <view class="flex-between pt-lg pb-lg b-1px-b">
                        <view class="f-paragraph c-title text-bold">选择时间</view>
                        <i @tap.stop="toClose" class="iconfont icon-close"></i>
                    </view>
                    <view class="flex-center pt-lg pb-lg">
                        <view class="f-caption c-warning">最长可查找时间跨度一年的交易</view>
                        <view
                            class="f-paragraph"
                            @tap.stop="toReset"
                            style="color: #5a677e"
                            v-if="check_time.start_time || check_time.end_time"
                        >
                            清除</view
                        >
                    </view>
                    <view class="flex-center pb-lg">
                        <view
                            @tap.stop="toShowTime('start_time')"
                            class="item-child flex-center flex-column"
                        >
                            <view>开始时间</view>
                            <view
                                class="mt-sm"
                                :style="{ color: check_time.start_time ? primaryColor : '#999' }"
                            >
                                {{ check_time.start_time || "选择时间" }}
                            </view>
                        </view>
                        <view
                            @tap.stop="toShowTime('end_time')"
                            class="item-child flex-center flex-column b-1px-l"
                        >
                            <view>结束时间</view>
                            <view
                                class="mt-sm"
                                :style="{ color: check_time.end_time ? primaryColor : '#999' }"
                            >
                                {{ check_time.end_time || "选择时间" }}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="flex-center flex-column fill-body">
                    <view class="space-lg"></view>
                    <view
                        @tap.stop="toConfirm"
                        class="confirm-btn flex-center f-title c-base radius-16"
                        :style="{ background: primaryColor }"
                        >确定</view
                    >
                    <view class="space-lg"></view>
                    <view class="space-safe"></view>
                </view>
            </view>
        </uni-popup>

        <w-picker
            mode="date"
            :startYear="startYear * 1 - 10"
            :endYear="startYear"
            :value="curDay"
            :current="false"
            fields="day"
            @confirm="onConfirm($event)"
            :disabled-after="false"
            ref="day"
            :themeColor="primaryColor"
            :visible.sync="showDate"
        >
        </w-picker>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import $util from "@/utils/index.js";
import wPicker from "../components/w-picker/w-picker.vue";
export default {
    components: {
        wPicker,
    },
    data() {
        return {
            isLoad: false,
            options: {},
            curDay: "",
            startYear: "",
            showKey: "",
            showDate: false,
            prev_time: {
                start_time: "",
                end_time: "",
            },
            check_time: {
                start_time: "",
                end_time: "",
            },
            param: {
                page: 1,
            },
            list: {
                data: [],
            },
            loading: true,
            lockTap: false,
        };
    },
    computed: mapState({
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
        userInfo: (state) => state.user.userInfo,
        haveOperItem: (state) => state.order.haveOperItem,
    }),
    onLoad(options) {
        let { title } = options;
        this.options = options;
        uni.setNavigationBarTitle({
            title,
        });
        let cur_time = new Date(Math.ceil(new Date().getTime()));
        this.curDay = this.$util.formatTime(cur_time, "YY-M-D");
        this.startYear = this.$util.formatTime(cur_time, "YY");
        this.initIndex();
    },
    onPullDownRefresh() {
        // #ifndef APP-PLUS
        uni.showNavigationBarLoading();
        // #endif
        this.initRefresh();
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
        if (this.list.current_page >= this.list.last_page || this.loading) return;
        this.param.page = this.param.page + 1;
        this.loading = true;
        this.getList();
    },
    methods: {
        ...mapMutations(["updateUserItem", "updateOrderItem"]),
        async initIndex(refresh = false) {
            // #ifdef H5
            if (!refresh && this.$jweixin.isWechat()) {
                await this.$jweixin.initJssdk();
                this.$jweixin.wxReady(() => {
                    this.$jweixin.hideOptionMenu();
                });
            }
            // #endif
            this.$util.setNavigationBarColor({
                bg: this.primaryColor,
            });
            await this.getList();
            this.isLoad = true;
        },
        initRefresh() {
            this.param.page = 1;
            this.initIndex(true);
        },
        async getList() {
            let { list: oldList, param } = this;
            let { start_time, end_time } = this.$util.deepCopy(this.check_time);
            param.start_time = start_time && end_time ? this.$util.DateToUnix(start_time) : "";
            param.end_time =
                start_time && end_time ? this.$util.DateToUnix(end_time) + 24 * 3600 - 1 : "";
            let { id } = this.options;
            param.channel_id = id;
            let newList = await this.$api.salesman.salesmanChannelOrderList(param);

            if (this.param.page == 1) {
                this.list = newList;
            } else {
                newList.data = oldList.data.concat(newList.data);
                this.list = newList;
            }
            this.loading = false;
            this.$util.hideAll();
        },
        toShowTimePopup(e, month = 0) {
            this.check_time = this.$util.deepCopy(this.prev_time);
            this.$refs.show_choose_time.open();
        },
        toReset() {
            this.check_time = {
                start_time: "",
                end_time: "",
            };
            this.getList(1);
        },
        async toClose() {
            let { start_time, end_time } = this.check_time;

            if (!start_time || !end_time) {
                this.prev_time = this.$util.deepCopy(this.check_time);
            }
            if (start_time && end_time) {
                this.check_time = this.$util.deepCopy(this.prev_time);
            }
            this.$refs.show_choose_time.close();
            this.getList(1);
        },
        toShowTime(key) {
            if (key == "end_time" && !this.check_time.start_time) {
                this.$util.showToast({
                    title: `请选择开始时间`,
                });
                return;
            }
            let showTime = this.check_time[key];
            if (showTime) {
                this.curDay = showTime;
            }
            this.showKey = key;
            this.showDate = true;
        },
        async onConfirm(val) {
            let { start_time, end_time } = this.check_time;
            let { showKey } = this;
            let show_unit = this.$util.DateToUnix(val.result);
            let start_unit = start_time ? this.$util.DateToUnix(start_time) : 0;
            let end_unit = end_time ? this.$util.DateToUnix(end_time) : 0;
            let cur_month = this.$util.formatTime(
                new Date(Math.ceil(new Date().getTime())),
                "YY-M-D"
            );
            let cur_unit = this.$util.DateToUnix(cur_month) + 1;

            let msgType = {
                start_time: "开始时间",
                end_time: "结束时间",
            };

            if (show_unit > cur_unit) {
                this.$util.showToast({
                    title: `${msgType[showKey]}不能选择未来时间哦`,
                });
                return;
            }

            if (
                (showKey == "start_time" &&
                    end_unit &&
                    end_unit < this.$util.DateToUnix(val.result)) ||
                (showKey == "end_time" &&
                    start_unit &&
                    start_unit > this.$util.DateToUnix(val.result))
            ) {
                this.$util.showToast({
                    title: `结束时间不能小于开始时间`,
                });
                return;
            }
            this.check_time[showKey] = val.result;
        },
        async toConfirm() {
            let { start_time = "", end_time = "" } = this.check_time;
            let start_unit = this.$util.DateToUnix(start_time) * 1000;
            let end_unit = this.$util.DateToUnix(end_time) * 1000;

            if (!start_time || !end_time || end_unit - start_unit > 365 * 24 * 3600 * 1000) {
                this.$util.showToast({
                    title: !start_time
                        ? `请选择开始时间`
                        : !end_time
                        ? `请选择结束时间`
                        : `查询时间跨度最长为一年哦`,
                });
                return;
            }
            this.prev_time = this.$util.deepCopy(this.check_time);
            this.$refs.show_choose_time.close();
            this.getList(1);
        },
    },
    filters: {
        handleTimeText(val, type) {
            let text = "请选择时间查询";
            let { start_time, end_time } = val;
            let formatType = "YY.M.D";
            if (start_time && end_time) {
                text =
                    $util.formatTime($util.DateToUnix(start_time) * 1000, formatType) +
                    " - " +
                    $util.formatTime($util.DateToUnix(end_time) * 1000, formatType);
            }
            return text;
        },
    },
};
</script>

<style lang="scss">
page {
    background: #fff;
}

.user-salesman-record {
    .fix-info {
        width: 100%;
        height: 112rpx;
        background: #f2f2f2;

        .iconshaixuanxia-1 {
            color: #525252;
            font-size: 20rpx;
            transform: scale(0.7);
        }
    }

    .popup-choose-time {
        width: 750rpx;
        border-radius: 30rpx 30rpx 0 0;

        .icon-close {
            color: #a8aeb8;
            font-size: 40rpx;
        }

        .item-child {
            width: 50%;
        }

        .confirm-btn {
            width: 670rpx;
            height: 100rpx;
        }
    }
}
</style>
